<template>
	<view class="zone">

		<Header title="实名认证" color="#fff"></Header>

		<view class="main">
			<view class="box">
				<view class="present">
					<p>第一、第二步完成即可成为实名用户</p>
					<view>当前状态：<p :class="[userinfo.is_check == 1?'grey':'']">{{userinfo.is_check == 1?'已认证':'未认证'}}</p> </view>
				</view>
				<view class="i_box">
					<view class="img_left">
						<image src="http://img.cpgm.cc/panda/static/public/publiccode.jpg" mode="widthFix" />
						<p>验证码: <text>{{userinfo.invite_code}}</text></p>
					</view>
					<view class="word">
						<p>第一步：扫码关注微信公众号认证</p>
						<p>1. 截屏扫码关注公众号；</p>
						<p>2.发送验证后提示绑定成功即完成认证；</p>
						<view class="button" @click="copy(userinfo.invite_code)">复制验证码</view>
					</view>
				</view>

				<view class="i_box">
					<view class="img_left">
						<image src="http://img.cpgm.cc/panda/static/public/face2.png" mode="widthFix" />
					</view>
					<view class="word">
						<p>第二步：人脸识别 </p>
						<p>完成人脸识别可以获得更多权限奖励！</p>
						<view class="button" @click="$p.navto('/pages/my/face')">前往认证</view>
					</view>
				</view>
			</view>

			<view class="box mart15">
				<p class="fw">完成以下认证开启更多潮玩大冒险权限，享受更丰厚待遇!</p>

				<view class="i_box">
					<view class="img_left">
						<image src="http://img.cpgm.cc/panda/static/game/zyzr.png" mode="widthFix" />
					</view>
					<view class="word">
						<p>游戏等级认证(1分钟完成) </p>
						<p>自由之刃达到85级，1分钟就能完成；</p>
						<view class="button" @click="$p.switchTab('/pages/tabbar/xiulian')">去玩游戏</view>
					</view>
				</view>
				<view class="i_box">
					<view class="img_left">
						<image src="http://img.cpgm.cc/panda/static/public/card.png" mode="widthFix" />
					</view>
					<view class="word">
						<p>大冒险高级玩家：获得7张潮玩熊猫卡</p>
						<p>通过各种途径获得银元换取熊猫卡</p>
						<view class="button" @click="$p.switchTab('/pages/tabbar/game')">去获取</view>
					</view>
				</view>
				<view class="i_box">
					<view class="img_left">
						<image src="http://img.cpgm.cc/panda/static/game/zyzr.png" mode="widthFix" />
					</view>
					<view class="word">
						<p>游戏高级认证:自由之刃达到120级 </p>
						<p>每日白嫖灵符，专为搬砖玩家设计</p>
						<view class="button" @click="$p.switchTab('/pages/tabbar/xiulian')">去玩游戏</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: uni.getStorageSync('userinfo'),
				show:false
			};
		},
		onShow(){
			this.getUserInfo();
		},
		methods: {
			// 请求用户信息接口
			async getUserInfo() {
				this.$getUserInfo.getUserInfo((res) => {
					this.userinfo = res.data
				})
			},
			// 点击复制
			fuzhi() {
				this.$p.copy("666660");
			},

			// 复制
			copy(text){
				this.$p.copy(text);
			},

			// 用户实名认证
			async userreal() {
				let phone_type = this.$u.os()
				let res = await this.$http.index.userreal({
					phone_type:phone_type
				});
				this.$u.toast(res.msg);
			},

			// 支付宝认证
			ali() {
				// #ifdef MP-WEIXIN
					if (!this.userinfo.ali_id) {
						let token = uni.getStorageSync('token')
						let alipayUrl = `https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=2021003196644007&scope=auth_user&redirect_uri=http://ali.heqx.top/home/ali_info/get_ali_info&state=${token}`
						
						let openURL = 'alipays://platformapi/startapp?appId=20000067&url=' + encodeURIComponent(alipayUrl);
						location.href = openURL
					} else {
						this.$u.toast('已认证')
					}
				// #endif

				// #ifdef APP-PLUS
					if (!this.userinfo.ali_id) {
						let token = uni.getStorageSync('token')
						let alipayUrl = `https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=2021003196644007&scope=auth_user&redirect_uri=http://ali.heqx.top/home/ali_info/get_ali_info&state=${token}`
						
						let openURL = 'alipays://platformapi/startapp?appId=20000067&url=' + encodeURIComponent(alipayUrl);

						if (this.$u.os() == 'ios') {
							location.href = openURL
						} else if (this.$u.os() == 'android') {
							plus.runtime.openURL(openURL)
						} else {
							location.href = openURL
						}
					} else {
						this.$u.toast('已认证')
					}
				// #endif

				// #ifdef H5
					if (!this.userinfo.ali_id) {
						let token = uni.getStorageSync('token')
						let alipayUrl = `https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=2021003196644007&scope=auth_user&redirect_uri=http://ali.heqx.top/home/ali_info/get_ali_info&state=${token}`
						
						let openURL = 'alipays://platformapi/startapp?appId=20000067&url=' + encodeURIComponent(alipayUrl);
						location.href = openURL
					} else {
						this.$u.toast('已认证')
					}
				// #endif
				
			},
		},
	};
</script>

<style lang="scss" scoped>
	.zone {
		background: linear-gradient(180deg, #0477FD 0%, #7AFDCF 100%);
		min-height: 100vh;
	}

	.main {
		padding: 10px;
	}

	.box {
		background: rgba(255, 255, 255, 0.7);
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		padding: 15px 10px;
	}

	.title {
		p {
			font-size: 16px;
			font-weight: 800;
			color: #000000;
			line-height: 24px;
			text-shadow: 0px 2px 5px rgba(254, 80, 93, 0.2);
			background: linear-gradient(180deg, #FF456B 0%, #FE5C4F 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}


	.ali {
		width: 95%;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 9px;
		border: 1px solid #E9E9E9;
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.button {
			width: 72px;
			height: 33px;
			background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
			border-radius: 5px;
			color: #fff;
		}
	}

	.a_left {
		display: flex;
		align-items: center;

		image {
			width: 50px;
			margin-right: 10px;
		}

		.word {
			display: flex;
			flex-direction: column;

			text:nth-child(1) {
				color: #000000;
				font-size: 13px;
			}

			text:nth-child(2) {
				color: #000000;
				font-size: 12px;
				margin-top: 4px;
			}
		}
	}

	// 分割线
	.line {
		width: 95%;
		margin: 20px auto;
		height: 1px;
		background: rgba(0, 0, 0, 0.1);
	}

	// 实名认证步骤
	.authstep {
		width: 90%;
		margin: 20px auto;

		p:nth-child(1) {
			color: #343434;
			font-size: 14px;
			margin-bottom: 6px;
		}

		p:nth-child(2),
		p:nth-child(3) {
			color: #000;
			font-size: 12px;
			line-height: 16px;
			zoom: 0.9;
			opacity: 0.9;
		}
	}

	.grey {
		opacity: 0.5;
	}

	.publiccode {
		width: 80px !important;
	}

.r_title {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px !important;
	width: 80px;
	height: 32px;
	background: linear-gradient(180deg, #FFF8B5 0%, #FFFFEB 100%);
	box-shadow: 0px 2px 0px 0px #964603, inset 0px -2px 0px 0px #e1ba65;
	border-radius: 5px;
	border: 1px solid #964603;
	color: #964603 !important;
	font-weight: 600;
}

.nav-bar {
	background: url('http://img.cpgm.cc/panda/static/home/bg3.jpg') no-repeat;
	background-size: 100% auto;
}


// 弹出层
.popbox {
	background: linear-gradient(180deg, #C7CEDD 0%, #FFFFFF 100%);
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
	padding: 20px 15px 30px;
}

.become {
	color: #000000;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
}

.p_close {
	width: 30px;
	position: absolute;
	top: 10px;
	right: 10px;
}

.mrb0 {
	margin-bottom: 0;
	font-weight: 600;
}

.zlexchange {
	background: #fff;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	margin-top: 10px;

	.button {
		width: 72px;
		height: 33px;
		background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
		border-radius: 5px;
		color: #fff;
	}

	.word {
		display: flex;
		flex-direction: column;

		p:nth-child(1) {
			font-size: 12px;
			text {
				color: #FE5C4F;
				font-size: 16px;
				font-weight: 600;
				margin-left: 10px;
			}
		}
		p:nth-child(2) {
			font-size: 12px;
			margin-top: 5px;
		}
	}
}

.pp {
	margin-top: 2px;
	padding-left: 26px;
	font-size: 12px;
}



.present {
	color: #000000;
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: space-between;

	view {
		background: rgba(0,0,0,0.5);
		border-radius: 4px;
		border: 1px solid #000000;
		display: flex;
		align-items: center;
		font-size: 12px !important;
		color: #fff;
		padding-left: 5px;
		zoom: 0.9;

		p {
			height: 100%;
			background: linear-gradient(225deg, #FFFC94 0%, #FFD400 50%, #FFFD25 100%);
			border-radius: 4px;
			border: 1px solid #000000;
			padding: 2px 5px;
			color: #B73800;
			font-weight: 600;
			font-size: 12px !important;
		}
	}
}

.explain {
	font-size: 12px;
	margin-top: 10px;
}

.i_box {
	background: #FFFFFF;
	border-radius: 9px;
	padding: 10px;
	display: flex;
	align-items: center;
	margin-top: 10px;

	.img_left {
		width: 33%;
		display: flex;
		flex-direction: column;
		align-items: center;

		image {
			width: 80%;
		}

		p {
			font-size: 12px;
			color: #000000;

			text {
				font-weight: 600;
			}
		}
	}

	.word {
		display: flex;
		flex-direction: column;

		p:nth-child(1) {
			color: #000000;
			font-size: 13px;
			font-weight: 600;
		}
		p:nth-child(2) {
			color: #000000;
			font-size: 12px;
			margin: 4px 0;
		}
		p:nth-child(3) {
			color: #000000;
			font-size: 12px;
		}
		.button {
			color: #B73800;
			font-size: 13px;
			width: 127px;
			height: 38px;
			background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
			background-size: 100% 100%;
			margin-top: 10px;
			font-weight: 600;
		}
	}
}

.grey {
	filter: grayscale(1);
}

.mart0 {
	margin: 0 !important;
}


.fw {
	font-size: 14px;
	font-weight: 600;
}

</style>